<template>
    <uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="info" :current="current" :mode="mode"
        :dots-styles="dotsStyles" field="content">
        <swiper class="swiper" circular @change="change" :autoplay="autoplay" :current="swiperDotIndex" :interval="interval"
            :duration="duration">
            <swiper-item v-for="(item, index) in info">
                <view class="swiper-item">
                    <image class="image" :src="item.url" mode="" />
                    <view class="news">
                        {{ item.news }}
                    </view>
                    <view class="title">
                        <view>
                            {{ item.title }}
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </uni-swiper-dot>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import uniSwiperDot from '@dcloudio/uni-ui/lib/uni-swiper-dot/uni-swiper-dot'
import { requestApi } from '@/api'



const autoplay = ref(true)
const interval = ref(3000)
const duration = ref(500)


const info = ref()
async function getNewsList() {
    uni.showLoading({
        title: "加载中",
    });
    const { data, status } = await requestApi.getNewsList()
    if (status == 0) {
        const { list } = data
        info.value = list.map((item) => {
            let title = item.artTitle
            let url = item.artImg
            return {
                news: '資訊', url, title
            }
        })
    }
}

onMounted(() => {
    getNewsList()
})

// 点样式 轮播图
const dotsStyles = ref({
    bottom: 85,
    width: 2,
    height: 2,
    color: '#ccc',
    backgroundColor: '#ccc',
    border: '#ccc',
    selectedBackgroundColor: '#fff',
    selectedBorder: '#fff',
})
const mode = ref('dot')
const current = ref(0)
const swiperDotIndex = ref(0)

function change(e) {
    current.value = e.detail.current
}
class clickItem {
    constructor(e) {
        this.swiperDotIndex = e;
    }
}

</script>

<style lang="scss">
.swiper {
    width: 100%;
    height: 187rpx;
    border-radius: 28rpx;
    overflow: hidden;
}

.swiper-item {
    position: relative;
    height: 187rpx;
    overflow: hidden;

    image {
        width: 670rpx;
        height: 187rpx;
        

    }

    .news {
        position: absolute;
        left: 88rpx;
        top: 0rpx;
        z-index: 10;
        background-color: $uni-color-primary;
        width: 72rpx;
        height: 30rpx;
        font-size: 22rpx;
        font-weight: 500;
        line-height: 30rpx;
        white-space: nowrap;
        text-align: center;
        color: #fff;
        border-radius: 0rpx 0rpx 6rpx 6rpx;
    }

    .title {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 10;
        background-color: rgba($color: #fff, $alpha: .5);
        padding: 12rpx 47rpx 9rpx;
        border-radius: 0rpx 0rpx 28rpx 28rpx;

        view {
            overflow: hidden;
            white-space: nowrap;
            width: 577rpx;
            height: 37rpx;
            line-height: 37rpx;
            text-align: center;
            color: #323845;
            opacity: 1;
            font-weight: 400;
        }
    }
}
</style>
